<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;

        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>

<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");

//    //画一个矩形
//    ctx.strokeRect(200,200,100,100);
//    //移动
//    ctx.translate(10,10)
//    ctx.strokeRect(200,200,100,100);

    //设置每10毫秒移动一个像素
    var g=ctx.createLinearGradient(0,0,550,550);
    //    2,添加渐变的颜色
    g.addColorStop(0,"pink");
    g.addColorStop(0.2,"yellow");
    g.addColorStop(0.5,"black");
    g.addColorStop(1,"green");
    //    3,使用渐变对象
    ctx.strokeStyle=g;
    ctx.fillStyle=g;
    ctx.lineWidth=20;

setInterval(function(){

    ctx.strokeRect(0,0,100,100);
    //移动
    ctx.translate(1,1)
},10)


</script>

</body>
</html>